<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>第一个three.js文件_WebGL三维场景</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--引入three.js三维引擎-->
    <!-- <script src="../three.js-r148/build/three.js"></script> -->
    <!-- <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.152.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@0.154.0/examples/jsm"
            }
        }
    </script> -->
    
    <!-- <script src="./three.js"></script> -->
    <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>

<body>
    <script type="module">
        // import * as THREE from '../three.js-r148/build/three.module.js';
        // const THREE = window.THREE || require('https://unpkg.com/three@0.155.0/build/three.module.js');
        // import * as THREE from 'https://unpkg.com/three/build/three.module.js';
        // import * as THREE from 'three';
        import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.module.js';
        // 鼠标键盘监听事件
        // import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        import { OrbitControls } from 'https://threejsfundamentals.org/threejs/resources/threejs/r122/examples/jsm/controls/OrbitControls.js';
        // import { OrbitControls } from '../three.js-r148/examples/jsm/controls/OrbitControls.js';
        console.log(THREE);
        /**
         * 创建场景对象Scene
         */
        var scene = new THREE.Scene();
        /**
         * 创建网格模型
         */
        //长方体 参数：长，宽，高
        // var geometry = new THREE.BoxGeometry(100, 100, 100);
        // 球体 参数：半径60  经纬度细分数40,40
        // var geometry = new THREE.SphereGeometry(60, 40, 40);
        // 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
        // var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 );
        // 正八面体
        // var geometry = new THREE.OctahedronGeometry(50);
        // 正十二面体
        // var geometry = new THREE.DodecahedronGeometry(50);
        // 正二十面体
        // var geometry = new THREE.IcosahedronGeometry(50);

        //长方体 参数：长，宽，高
        // var geometry1 = new THREE.BoxGeometry(70, 70, 70);
        // var material1 = new THREE.MeshStandardMaterial({
        //     color: 0xfa0000,
        //     emissive: 0x070070,
        //     // opacity: .9,
        //     // transparent:true,
        // }); 
        // //材质对象Material
        // var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh
        // // mesh1.translateY(120); //球体网格模型沿Y轴正方向平移120
        // scene.add(mesh1); //网格模型添加到场景中

        // 球体 参数：半径60  经纬度细分数40,40
        var geometry2 = new THREE.SphereGeometry(40, 100, 100);
        var material2 = new THREE.MeshStandardMaterial({
            color: 0x0081cc,
            emissive: 0xff0000,
            roughness: 0,
            metalness: 0,
            wireframe: false,
            side: THREE.DoubleSide,
            flatShading: true // 使用THREE.SmoothShading常量来启用平滑着色
        });
        //材质对象Material
        var mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh
        // mesh2.translateX(100); //球体网格模型沿X轴正方向平移100
        // mesh2.translateY(100); //球体网格模型沿Y轴正方向平移100
        // mesh2.translateZ(100); //球体网格模型沿Z轴正方向平移120
        mesh2.position.set(80, 80, 80);//设置mesh3模型对象的xyz坐标为120,0,0
        scene.add(mesh2); //网格模型添加到场景中
        
        // 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
        // var geometry3 = new THREE.CylinderGeometry(50, 50, 50, 25);
        // var material3 = new THREE.MeshLambertMaterial({
        //     color: 0x1E90FF
        // }); 
        // //材质对象Material
        // var mesh3 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh
        // mesh3.position.set(100, 0, 100);//设置mesh3模型对象的xyz坐标为120,0,0
        // scene.add(mesh3); //网格模型添加到场景中

        //  // 正八面体
        // var geometry4 = new THREE.OctahedronGeometry(70);
        // var material4 = new THREE.MeshStandardMaterial({
        //     color: 0xFF1493,
        //     emissive: 0xff0000,
        //     roughness: 0,
        //     metalness: 0,
        //     wireframe: false,
        //     side: THREE.DoubleSide,
        //     flatShading: true // 使用THREE.SmoothShading常量来启用平滑着色
        // }); //材质对象Material
        // var mesh4 = new THREE.Mesh(geometry4, material4); //网格模型对象Mesh
        // mesh4.position.set(100, 100, 100);//设置mesh3模型对象的xyz坐标为120,0,0
        // scene.add(mesh4); //网格模型添加到场景中
        
        // // 正二十面体
        // var geometry5 = new THREE.IcosahedronGeometry(80);
        // var material5 = new THREE.MeshStandardMaterial({
        //     color: 0xFFE4B5,
        //     roughness: 0,
        //     metalness: 0,
        //     wireframe: false,
        //     side: THREE.DoubleSide,
        //     flatShading: true // 使用THREE.SmoothShading常量来启用平滑着色
        // }); //材质对象Material
        // var mesh5 = new THREE.Mesh(geometry5, material5); //网格模型对象Mesh
        // mesh5.position.set(100, -100, 100);//设置mesh3模型对象的xyz坐标为120,0,0
        // scene.add(mesh5); //网格模型添加到场景中

        var geometry6 = new THREE.TorusKnotGeometry( 30, 10, 300, 20, 2, 3 );
		const material6 = new THREE.MeshStandardMaterial({ 
            color: 0x0081cc,
            emissive: 0x000000,
            roughness: 0,
            metalness: 0,
            wireframe: true,
            side: THREE.DoubleSide,
            flatShading: true // 使用THREE.SmoothShading常量来启用平滑着色
        });
		const mesh6 = new THREE.Mesh( geometry6, material6 );
        // mesh6.position.set(50, 50, 50);//设置mesh3模型对象的xyz坐标为120,0,0
		scene.add(mesh6);

        /**
         * 光源设置
         */
        //点光源
        var point1 = new THREE.PointLight(0xffffff, 1, 0, 10);
        point1.position.set(100, 100, 100); //点光源位置
        scene.add(point1); //点光源添加到场景中
        var point2 = new THREE.PointLight(0xffffff, 1, 0, 10);
        point2.position.set(-200, 200, 200); //点光源位置
        scene.add(point2); //点光源添加到场景中
        
        var point3 = new THREE.PointLight(0xffffff, 1, 0, 10);
        point3.position.set(300, -800, 300); //点光源位置
        scene.add(point3); //点光源添加到场景中
        
        var point4 = new THREE.PointLight(0xffffff, 1, 0, 100);
        point4.position.set(400, 400, -800); //点光源位置
        scene.add(point4); //点光源添加到场景中
        //环境光
        var ambient = new THREE.AmbientLight(0xffffff);
        scene.add(ambient);
        // console.log(scene)
        // console.log(scene.children)
        
        /**
         * 相机设置
         */
        var width = window.innerWidth; //窗口宽度
        var height = window.innerHeight; //窗口高度
        var k = width / height; //窗口宽高比
        var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
        //创建相机对象
        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
        camera.position.set(400, 300, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
        /**
         * 创建渲染器对象
         */
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(width, height);//设置渲染区域尺寸
        renderer.setClearColor(0x333333, 1); //设置背景颜色
        document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
        //执行渲染操作   指定场景、相机作为参数
        // renderer.render(scene, camera);

        // 创建并添加AxisHelper到场景中
        var axisHelper = new THREE.AxisHelper(250); // 250是AxisHelper的大小
        scene.add(axisHelper);

        
        // 自执行动画，添加每次动画的时间差值，使物体旋转速度与时间间隔相关（匀速动画）
        let T0 = new Date(); // 上次时间
        function render() {
            let T1 = new Date(); //本次时间
            let t = T1 - T0; //时间差
            T0 = T1; //把本次时间赋值给上次时间
            mesh6.rotateY(0.001*t)
            mesh6.rotateX(0.001*t)
            mesh6.rotateZ(0.001*t)
            renderer.render(scene, camera);
            requestAnimationFrame(render);
        }

        // 鼠标键盘操控动画
        // function render() {
        //     renderer.render(scene, camera);
        //     requestAnimationFrame(render);
        // }
        
        render();

        var controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
        // controls.addEventListener('change', render); //监听鼠标、键盘事件
    </script>
</body>

</html>